<template>
  <view class="home">
    <view class="apply-nav">
      <view>
        <image src="/static/images/user/icon_current.png" v-if="current >= 1" mode=""></image>
        <image src="/static/images/user/icon_noCurrent.png" v-else mode=""></image>
        <view :class="current>=1?'active':''">营业类型</view>
      </view>
      <view class="br"></view>
      <view>
        <image src="/static/images/user/icon_current.png" v-if="current >= 2" mode=""></image>
        <image src="/static/images/user/icon_noCurrent.png" v-else mode=""></image>
        <view :class="current>=2?'active':''">基本信息</view>
      </view>
      <view class="br"></view>
      <view>
        <image src="/static/images/user/icon_current.png" v-if="current == 3" mode=""></image>
        <image src="/static/images/user/icon_noCurrent.png" v-else mode=""></image>
        <view :class="current==3?'active':''">上传资料</view>
      </view>
    </view>
    <block v-if="current == 1">
      <view class="first-title">请选择您想入驻的店铺类型</view>
      <view class="first-desc">请谨慎选择，入驻成功之后将不能修改</view>
      <view class="shop-type" @click="type = 0">
        <image src="/static/images/user/icon_gr.png" class="type-img" mode=""></image>
        <text>个体工商户</text>
        <image src="/static/images/user/icon_check_n.png" class="check-img" v-if="type == 1" mode=""></image>
        <image src="/static/images/user/icon_check_y.png" class="check-img" v-else mode=""></image>
      </view>
      <view class="shop-type" @click="type = 1">
        <image src="/static/images/user/icon_qy.png" class="type-img" mode=""></image>
        <text>企业</text>
        <image src="/static/images/user/icon_check_n.png" class="check-img" v-if="type == 0" mode=""></image>
        <image src="/static/images/user/icon_check_y.png" class="check-img" v-else mode=""></image>
      </view>
      <view class="shop-btn" @click="handleAdd">
        下一步
      </view>
    </block>
    <block v-if="current == 2">
      <view class="first-title">请填写个人基本信息</view>
      <view class="first-desc">请认真填写</view>
      <view class="form-box">
        <view class="form-item">
          <view class="form-label">{{type == 0?'店铺':'企业'}}logo</view>
          <view class="form-image">
            <image :src="form.avatar?form.avatar:'/static/images/user/icon_upload.png'" @click="uploadCover('avatar')"
              mode=""></image>
          </view>
        </view>
        <view class="form-item" @click="$refs.wanlAddress.show()">
          <view class="form-label">所属区域</view>
          <view class="form-input">
            <text>{{form.city?form.city:'请输入'}}</text>
            <image src="/static/images/user/icon_more.png" class="icon_more" mode=""></image>
          </view>
        </view>
        <view class="form-item">
          <view class="form-label">{{type == 0?'店铺地址':'企业地址'}}</view>
          <input v-model="form.address" placeholder="请输入" class="form-input" />
        </view>
        <view class="form-item">
          <view class="form-label">客服电话</view>
          <input type="number" v-model="form.mobile" maxlength="11" placeholder="输入客服电话" class="form-input" />
        </view>
        <view class="form-item">
          <view class="form-label">微信号/手机号</view>
          <input type="number" v-model="form.wechat" placeholder="输入微信号/手机号" class="form-input" />
        </view>
        <view class="form-item">
          <view class="form-label">{{type==0?'店铺介绍':'企业介绍'}}</view>
          <textarea placeholder="请输入" v-model="form.content" class="form-textarea" />
        </view>
      </view>
      <view class="shop-btn" @click="handleAdd">
        下一步
      </view>
    </block>
    <block v-if="current == 3">
      <view class="first-title">请上传{{type == 0?'个人':'企业'}}的图片资料</view>
      <view class="first-desc">请认真上传</view>
      <view class="form-box">
        <view class="form-item">
          <view class="form-label">请上传营业执照</view>
          <view class="form-image">
            <image :src="form.trademark?form.trademark:'/static/images/user/icon_upload.png'"
              @click="uploadCover('trademark')" mode=""></image>
          </view>
        </view>
        <view class="form-item">
          <view class="form-label form-label-wide">请上传身份证照片</view>
          <view class="form-card">
            <image :src="form.card_face?form.card_face:'/static/images/user/icon_card_y.png'"
              @click="uploadCover('card_face')" mode=""></image>
            <image :src="form.card_bad?form.card_bad:'/static/images/user/icon_card_n.png'"
              @click="uploadCover('card_bad')" mode=""></image>
          </view>
        </view>
      </view>
      <view class="form-box">
        <view class="form-item">
          <view class="form-label form-label-wide">{{type==0?'店铺名称':'企业名称'}}</view>
          <input placeholder="输入名称" v-model="form.shopname" class="form-input form-input-wide" />
        </view>
        <view class="form-item">
          <view class="form-label form-label-wide">统一社会信用代码</view>
          <input placeholder="输入统一社会信用代码" v-model="form.number" class="form-input form-input-wide" />
        </view>
        <view class="form-item">
          <view class="form-label form-label-wide">法人代表</view>
          <input placeholder="输入法人代表" v-model="form.name" class="form-input form-input-wide" />
        </view>
      </view>
      <view class="shop-btn" @click="applyShop()">
        提交
      </view>
    </block>
    <wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 1,
        type: 0,
        form: {
          name: '',
          number: '',
          image: [],
          trademark: '',
          wechat: '',
          mobile: '',
          shopname: '',
          avatar: '',
          bio: '',
          city: '',
          content: '',
          card_bad: '',
          card_face: ''
        },
      };
    },
    methods: {
      // 选择地址成功
      successSelectAddress(address) {
        this.form.country = address.country;
        this.form.province_id = address.province;
        this.form.city_id = address.citycode;
        this.form.district = address.district;
        this.form.city = address.formatted_address;
        this.form.location = address.location;
        this.form.adcode = address.adcode;
        this.form.location = address.location;
        this.form.adcode = address.adcode;
      },
      // 上传图片
      uploadCover(key) { //选择图片
        uni.chooseImage({
          sourceType: ["camera", "album"],
          sizeType: "compressed",
          count: 1,
          success: res => {
            uni.request({
              url: '/wanlshop/common/uploadData',
              success: updata => {
                uni.uploadFile({
                  url: updata.data.uploadurl,
                  filePath: res.tempFilePaths[0],
                  formData: updata.data.storage == 'local' ? null : updata.data.multipart, // 1.0.5升级
                  header: {
                    token: this.$store.state.user.token
                  },
                  name: 'file',
                  success: ({ data }) => {
                    let res = JSON.parse(data)
                    if (res.code == 1) {
                      this.form[key] = res.data.fullurl
                    }
                  }
                });
              }
            });
          }
        });
      },
      applyShop() {
        this.form.state = this.type
        uni.request({
          url: '/wanlshop/shop/applyShop',
          method: 'POST',
          data: this.form,
          success: ({res}) => {
            uni.showToast({
              icon: 'none',
              mask: true,
              title: '修改成功'
            })
            setTimeout(() => {
              this.$wanlshop.back()
            }, 800)
          }
        })
      },

      handleAdd() {
        this.current++
      }
    }
  }
</script>

<style lang="scss">
  .home {
    padding-bottom: 20rpx;
  }

  .apply-nav {
    position: sticky;
    top: 88rpx;
    background: #fff;
    padding: 32rpx 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #999;
    border-top: 1px solid #f5f5f5;
    margin-bottom: 40rpx;
    z-index: 9;

    .br {
      width: 104rpx;
      height: 0;
      border: 2rpx dashed #bcbcbc;
      margin-bottom: 50rpx;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 10rpx;
    }

    .active {
      color: #EF5D0F;
    }
  }

  .first-title,
  .first-desc {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    padding-left: 26rpx;
    margin-bottom: 20rpx;
  }

  .first-desc {
    color: #999999;
  }

  .shop-type {
    padding: 56rpx 40rpx;
    background: #fff;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin: 0 25rpx 40rpx;

    .type-img {
      width: 88rpx;
      height: 88rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }

    .check-img {
      width: 40rpx;
      height: 40rpx;
      vertical-align: middle;
      float: right;
      margin-top: 22rpx;
    }
  }

  .shop-btn {
    width: 660rpx;
    height: 92rpx;
    background: linear-gradient(270deg, #EF430F 0%, #F17E19 100%);
    border-radius: 12rpx;
    margin: 80rpx auto 0;
    line-height: 92rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
  }

  .form-box {
    border-radius: 12rpx;
    background: #fff;
    margin: 24rpx;

    .form-item {
      padding: 30rpx;
      border-bottom: 1px solid #f5f5f5;

      .form-label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        display: inline-block;
        width: 200rpx;
      }

      .form-label-wide {
        width: 230rpx;
      }


      .form-image {
        image {
          width: 160rpx;
          height: 160rpx;
          margin-top: 12rpx;
          margin-right: 12rpx;
        }
      }

      .form-card {
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 280rpx;
          height: 224rpx;
          margin-top: 30rpx;
        }
      }

      .form-input {
        display: inline-block;
        width: calc(100% - 200rpx);
        vertical-align: bottom;
        font-size: 28rpx;

        .icon_more {
          float: right;
          width: 40rpx;
          height: 40rpx;
        }

      }

      .form-input-wide {
        width: calc(100% - 260rpx);
        margin-left: 30rpx;
      }

      .form-textarea {
        border: 0;
        font-size: 28rpx;
        width: 100%;
        height: 100rpx;
        margin-top: 12rpx;
      }
    }
  }
</style>